<template>
<view class="page__bd">
	<custom-navbar bgColor="bg-white shadow" :isBack="true" :isHome="true">
		<block slot="backText">返回</block>
		<block slot="content">店铺列表</block>
	</custom-navbar>
	<HMfilterDropdown :menuTop="CustomBar" :filterData="filterData" :defaultSelected="defaultSelected" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
	<!-- 占位 -->
	<view class="place" style="height: 90rpx;"></view>
	<block v-for="(item,index) in shopList" :key="index">
		<view class="daui-media daui-media_appmsg daui-media_product" @tap="openShopDetail(item.id)">
			<view class="daui-media__hd">
				<image :src="item.logo" class="daui-media__thumb"></image>
			</view>
			<view class="daui-media__bd">
				<view class="daui-media__title">{{item.name}}</view>
				<view class="daui-media__second margin-top-xs"><text class="iconfontzz margin-right-xs">&#xe89d;</text>{{item.address}}</view>
			</view>
			<view class="daui-media__ft">
				<text class="iconfontzz text-cyan text-xxl" @click="phoneCall(item.phone)">&#xe655;</text>
			</view>
		</view>
	</block>
	<view class="daui-load" :class="!loadding?'loading':'over'"><view class="daui-load-in"><view class="daui-nomore-text"></view></view></view>
	
	<!--toast提示-->
	<daui-toast ref="toast"></daui-toast>
</view>
</template>

<script>
import danceuiTool from '../../utils/danceuiTool';
import http from "../../server/api-shop.js";
export default {
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			filterData: [],
			defaultSelected:[],
			keyword: '',
			slideList: [],
			shopList: [],
			cid: 0,
			list_param:{
				p:1
			},
			nowPage:1,
			loadding: false,
			pullUpOn: true,
			scrollTop: 0
		}
	},
	computed: {
		style() {
			var StatusBar = this.StatusBar;
			var CustomBar = this.CustomBar;
			var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
			return style
		}
	},
	onLoad(options) {
		console.log('=====加载页面onLoad');
		if(typeof options.cid != "undefined"){
			this.cid = options.cid;
		}else{
			this.cid = '';
		}
		if(typeof options.keyword != "undefined"){
			this.keyword = options.keyword;
		}else{
			this.keyword = '';
		}
		this.list_param = {cid:this.cid, keyword:this.keyword, p:1};
		this.getData();
	},
	onPullDownRefresh() {
		console.log('=====上拉刷新refresh');
		this.list_param = {...this.list_param,cid:this.cid,p:1};
		this.getData();
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 200);
	},
	async onReachBottom() {
		console.log('=====拉到底部onReachBottom');
		if (!this.pullUpOn) return;
		this.loadding = true;
		const token = uni.getStorageSync('token');
		let headers = {"Authorization":"Bearer "+token};
		this.list_param = {...this.list_param,p:++this.nowPage}
		let ret = await http.shopSearchlist(this.$refs.toast, this.list_param, headers);
		var retData = ret.data;
		if(retData.feedbackList){
			this.feedbackList = [...this.feedbackList,...retData.feedbackList];
			this.nowPage = this.nowPage + 1;
		}else{
			this.loadding = false;
			this.pullUpOn = false;
		}
	},	onPageScroll(e) {		this.scrollTop = e.scrollTop;	},
	methods: {
		async getData(){ //请求并获取数据
			const token = uni.getStorageSync('token');
			let headers = {"Authorization":"Bearer "+token};
			let ret = await http.shopSearchlist(this.$refs.toast, this.list_param, headers);
			var retData = ret.data;
			console.log('shopList页面,获取到的数据：', retData);
			this.filterData = retData.filterData;
			this.slideList = retData.slideList;
			this.shopList = retData.shopList;
			this.loadding = true;
		},
		confirm(e){ //接收菜单结果
			console.log('e:', e);
			this.indexArr = e.index;
			this.valueArr = e.value;
			console.log('this.indexArr:', this.indexArr);
			console.log('this.valueArr:', this.valueArr);
			if(this.valueArr[0]){
				this.cid = this.valueArr[0][0];
				this.list_param = {...this.list_param,cid: this.cid}
			}
			if(this.valueArr[1]){
				this.sort = this.valueArr[1][0];
				this.list_param = {...this.list_param,sort: this.sort}
			}
			this.getData();
		},
		phoneCall(tel){
			uni.makePhoneCall({
				phoneNumber: tel
			});
		},
		openShopDetail(shid){
			uni.navigateTo({
				url: '/pages/shop/shopDetail?shid='+shid
			})
		},
		openShopEnter() {
			uni.navigateTo({
				url: '/pages/shop/enter'
			})
		}
	}
}
</script>

<style>
.container {
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-order-list {
	margin-top: 80rpx;
}

.tui-order-item {
	margin-top: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
}

.tui-goods-title {
	width: 100%;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-order-status {
	color: #888;
	font-size: 26rpx;
}

.tui-goods-item {
	width: 100%;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.tui-goods-img {
	width: 180rpx;
	height: 180rpx;
	display: block;
	flex-shrink: 0;
}

.tui-goods-center {
	flex: 1;
	padding: 20rpx 8rpx;
	box-sizing: border-box;
}

.tui-goods-name {
	max-width: 310rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 26rpx;
	line-height: 32rpx;
}

.tui-goods-attr {
	font-size: 22rpx;
	color: #888888;
	line-height: 32rpx;
	padding-top: 20rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-price-right {
	text-align: right;
	font-size: 24rpx;
	color: #888888;
	line-height: 30rpx;
	padding-top: 20rpx;
}

.tui-color-red {
	color: #E41F19;
	padding-right: 30rpx;
}

.tui-goods-price {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	font-size: 24rpx;
}

.tui-size-24 {
	font-size: 24rpx;
	line-height: 24rpx;
}

.tui-price-large {
	font-size: 32rpx;
	line-height: 30rpx;
	font-weight: 500;
}

.tui-order-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: #fff;
	padding: 10rpx 30rpx 20rpx;
	box-sizing: border-box;
}

.tui-btn-ml {
	margin-left: 20rpx;
}

/*浮动按钮*/
.enter-float {
	/* #ifndef MP-WEIXIN */
	bottom: 200rpx;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	bottom: 200rpx;
	/* #endif */
	position: fixed;
	right: 20rpx;
	height: 120upx;
	box-shadow: none;
}
.enter-float .enter-float-btn{}
.enter-float .iconfontzz{}
.enter-float .enter-float-txt{line-height: 26rpx;font-size: 16rpx;}
</style>
